<template>
  <div class="wrap" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="确认订单"></myHead>
    <div class="address" @click="jump('addAddress')" v-show="!address?true:false">
      <span>添加地址</span>
      <img src="../../../static/img/add.png" alt="">
    </div>
    <div class="selectedAddress" v-show="address?true:false">
      <div class="select_top" @click="jump('myAddress')">
        <div class="sel_top">
          <div><img src="../../../static/img/moren.png" alt="" v-if="address.type == 1"><p>{{address.dispatching+address.particular}}</p></div>
          <p>{{address.name}}&emsp;{{address.phone}}</p>
        </div>
        <img src="../../../static/img/youjiantou3.png" alt="">
      </div>
      <div v-if="store_type == 0">
        <div class="select_bot"><span>立即送出</span><span>大约11:30送达</span></div>
<!--        <div class="select_bot" v-else><span>到店自取</span><span></span></div>-->
      </div>
      <div v-else>
        <div class="select_bot"><span></span><span>该产品需要到店核销</span></div>
      </div>
    </div>
    <div class="info">
      <div class="infoTop" v-for="(x,y) in shopList.new_goods_list">
        <img :src="x.detail.image" alt="">
        <div class="infoMsg">
          <p>{{x.detail.title}}</p>
          <div class="msg_2"><p>规格:&nbsp;&nbsp;<span v-for="z in x.sku_price_txt">{{z}}&ensp;</span></p></div>
          <div class="num">
            <p>￥{{x.goods_price}}</p>
            <p>x<span>{{x.goods_num}}</span></p>
          </div>
        </div>
      </div>
      <div class="infoBot">
        <span>配送费</span>
        <span>￥{{psMoney[0]}}</span>
      </div>
      <div class="infoBot">
        <span>包装费</span>
        <span>￥{{psMoney[1]}}</span>
      </div>
    </div>
    <div class="bottom">
        <div class="item">
          <div><img src="../../../static/img/fan.png" alt=""><span>满返积分商家优惠</span></div>
          <span>返{{money[0]}}积分</span>
        </div>
        <div class="item-1" @click="yhj">
          <div class="item-1-img"><span>优惠券</span><p>{{useNum}}张可使用</p></div>
          <div><span>{{YHJ?'满'+YHJ.condition+'减'+YHJ.sum+'元':'暂未使用'}}</span> <img src="../../../static/img/yjt1.png" alt=""></div>
        </div>
      <div class="bot-shopMsg">
        <p>买家留言</p>
        <textarea name=""  placeholder="留言保持20字以内" v-model="txtVal"></textarea>
      </div>
        <div class="money">
            <p>已优惠&nbsp;&nbsp;<span>￥{{money[1]}}</span></p>
            <p>小计&nbsp;&nbsp;<span>￥{{money[0]}}</span></p>
        </div>
    </div>
    <footer>
        <div class="foot_left">
          <span>已优惠￥{{money[1]}}</span>
          <p>合计 <span>￥{{money[0]}}</span></p>
        </div>
        <div class="submit" @click="popup">提交订单</div>
    </footer>

    <van-popup v-model="isHide" class="fkPopup" get-container="body">
      <div class="popup" >
        <div class="popup_box">
          <img src="../../../static/img/dingdan1.png" alt="">
          <span class="pop1">订单支付成功</span>
          <span class="pop2">店家正在为您备货</span>
          <div class="pop3" @click="jump('orderDetails')">查看订单</div>
        </div>
      </div>
      <p style="width: 100%;height: .01rem"></p>
    </van-popup>

    <!--  优惠券选择  -->
    <van-popup v-model="yhjShow" round position="bottom" :style="{ height: '55%' }">
      <div class="yhj_wrap">
        <div class="yhj_tit"><p>优惠券</p><img src="../../../static/img/closeTu.png" alt="" @click="yhjShow=false"></div>
        <div class="yhj_item_wrap">
          <div class="yhj_item" v-for="x in coupon">
            <div class="yhj_item_left">
              <p><span>￥</span>{{x.sum}}</p>
              <p>满{{x.condition}}元可用</p>
            </div>
            <div class="yhj_item_right">
              <div class="yhj_item_rt_left">
                <p>{{x.sum}}元代金券</p>
                <p>{{x.type==1?'通用红包':'店铺红包'}}</p>
                <p>{{x.deadline | formatDate}}</p>
              </div>
              <p :class="x.isUse?'yhj_item_btn':'yhj_item_btn usered'" @click="useYHJ(x)">
                {{x.isUse?'立即使用':'不可使用'}}</p>
            </div>
          </div>
        </div>
      </div>
    </van-popup>


    <!--付款弹窗-->
    <van-dialog v-model="isPay" title="订单支付"  show-cancel-button width="3.2rem" :beforeClose="beforeClose" cancel-button-text="微信支付" confirm-button-text="余额支付">
      <div class="payTxt">
        本次需要支付<span style="color: #FF7611">￥{{money[0]}}</span>
      </div>
    </van-dialog>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  import {formatDate} from '../../methods/time';
  export default {
    name: "order",
    components: {
      myHead
    },
    filters: {
      formatDate(time) {
        time = time * 1000;
        let date = new Date(time);
        return formatDate(date, 'yyyy/MM/dd')
      }
    },
    data(){
      return {
        isShow:true,
        isHide:false,
        txtVal:'',
        store_type:'',
        address:'', // 显示地址
        shopList:[], // 商品列表
        coupon:[], // 优惠券列表
        useNum:0, // 可使用的优惠券
        yhjShow: false,
        YHJ:false, // 当前使用的优惠券
        isPay:false,
        psMoney:['0','0'], // 配送费与包装费

      }
    },
    created(){
      this.shopList = JSON.parse(this.$route.query.data);
      for(let i=0;i<this.shopList.new_goods_list.length;i++){
        for(let y=0;y<this.shopList.new_goods_list[i].detail.sku_price.length;y++){
          if(this.shopList.new_goods_list[i].sku_price_id == this.shopList.new_goods_list[i].detail.sku_price[y].id){
            this.shopList.new_goods_list[i].sku_price_txt = this.shopList.new_goods_list[i].detail.sku_price[y].goods_sku_text.split(" ");
            this.shopList.new_goods_list[i].sku_price_txt.splice(0,1);
            console.log(this.shopList.new_goods_list[i].sku_price_txt);
          }
        }
      }
      console.log(this.shopList);
      // 请求地址列表
      this.$myAxios('index/address/index','post',{
        user_id:this.$myStorage.query()
      }).then(res=>{
        if (res.data.state) {
          if (this.$myStorage.query('mr')){
            this.address = res.data.address[this.$myStorage.query('mr')]
          }else {
            for (var i of res.data.address) {
              if (i.type == 1){
                this.address = i;
                break;
              }
            }
          }
        }else {
          this.$myNotice('记得填写地址！',3000);
        }
        // console.log(this.address)
      });
      //请求店铺的配送费与包装费
      this.$myAxios('store/index/info','post',{
        store_id:this.shopList.new_goods_list[0].detail.store_id
      }).then(res=>{
        if(res.data.data.config_info[18].value){
          this.psMoney = [res.data.data.config_info[18].value,res.data.data.config_info[19].value];
        }
        this.store_type = res.data.data.store_info.trade_model;
      });
      // 获取服务器时间戳
      this.$myAxios('api/index/getTime','get',{}).then(res=>{
        if (res.data.code == 1) {
          var time = res.data.time;
            // 请求优惠券列表
            this.$myAxios('index/coupon/index','post',{
              user_id:this.$myStorage.query()
            }).then(ress=>{
              if (ress.data.state == 1) {
                var data = ress.data.address;
                var arr = [];
                var num = 0;
                // 计算当前总价
                for (var s in this.shopList) {
                  num+=this.shopList[s].goods_num;
                }
                num+=this.psMoney[0]*1;
                num+=this.psMoney[1]*1;
                for (var i in data) {
                  if (data[i].starttime < time && data[i].deadline > time) {
                    if (data[i].mid == '0') {
                      if (num < data[i].condition){
                        data[i].isUse = false;
                      }else {
                        data[i].isUse = true;
                        this.useNum+=1;
                      }
                      arr.push(data[i])
                    }else {
                      if (data[i].mid != this.shopList[0].store_id || num < data[i].condition){
                        data[i].isUse = false;
                      }else {
                        data[i].isUse = true;
                        this.useNum+=1;
                      }
                      arr.push(data[i])
                    }
                  }
                }
                this.coupon = arr;
                console.log( this.coupon)
              }else {

              }
            })
        }
      })
    },
    computed:{
      money(){
        var num = 0;
        var yh = 0;
        num = this.shopList.total_fee;
        if (this.YHJ) {
          if (num+this.psMoney[0]*1+this.psMoney[1]*1 >= this.YHJ.condition) {
            yh = this.YHJ.sum;
          }
        }
        return [num-yh+this.psMoney[0]*1+this.psMoney[1]*1,yh];
      }
    },
    methods:{
      beforeClose(action,done){
        if (action === 'confirm') {
          console.log(this.shopList);
          this.$myAxios('addons/shopro/order/createOrder','post',{
            address_id:this.address.id,
            buy_type:this.shopList.activity_type,
            coupons_id:0,
            dispatch_type:"express",
            from:"goods",
            groupon_id:0,
            goods_list:JSON.stringify(this.shopList.new_goods_list),
            order_type:"goods",
            token:this.$store.state.userInfo.token_lt,
            remark:"开团",
          }).then( res=>{
            if(res.data.code ==1 ){
              this.$myAxios('addons/shopro/pay/prepay','post',{
                payment:"wallet",
                order_sn:res.data.data.order_sn,
                token:this.$store.state.userInfo.token_lt,
              }).then( e=>{
                if(e.data.code ==1){
                  this.$myNotice(e.data.msg,2000);
                  // this.$router.push({
                  //   path:'/views/Client/ptDetails',
                  //   query:{id:e.data.data.id}
                  // })
                  this.$router.push({
                    path:'/views/Client/my',
                  })
                }else{
                  done();
                  console.log(e.data.code);
                  this.isPay = false;
                  this.$myNotice(e.data.msg,2000);
                }
              })
            }else{
              this.$myNotice('网络连接中断...',2000);
            }
          })
        } else {
          // 微信支付
          this.$myNotice('微信支付暂未开通！',1500);
          done();
        }
      },
      // 优惠券
      yhj(){
        this.yhjShow = true;
        // this.$myNotice('暂未开放~',1500);
      },
      // 使用优惠券
      useYHJ(data){
        if (!data.isUse) {
          this.$myNotice('不满足使用条件~',1500);
          this.yhjShow = false;
          return
        }
        this.YHJ = data;
        this.yhjShow = false;
      },
      jump(page){
        this.$router.push({
          name:page
        })
      },
      submission(){
        this.isShow = !this.isShow;
      },
      popup(){
        if (!this.address) {
          this.$myNotice('请填写地址~',1500);
          return
        }
        this.isPay = true;
        // this.isHide = true;
      },
      closePopup(){
        this.isHide = false;
      },
    },
    watch:{
      txtVal(){
        this.txtVal = this.txtVal.length>20?this.txtVal = this.txtVal.substring(0,20):this.txtVal;
      }
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    box-sizing: border-box;
    padding-top: .5rem;
    background-color: #F5F5F5;
    padding-bottom: .3rem;
  }

  .address {
    width: 3.51rem;
    height: .46rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 .02rem .05rem 0 rgba(151, 151, 151, 0.06);
    border-radius: .07rem;
    margin: .1rem auto;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }

  .address > span {
    color: #FF7611;
    font-size: .16rem;
    font-family: PingFang SC;
    font-weight: 500;
  }

  .address > img {
    width: .11rem;
    height: .11rem;
    margin-left: .05rem;
  }
  .info {
    width: 3.51rem;
    box-sizing: border-box;
    min-height: 1.4rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 .06rem .11rem 0 rgba(225, 225, 225, 0.28);
    border-radius: .07rem .07rem .07rem .07rem;
    margin: .1rem auto;
    padding: .15rem .1rem 0 .1rem;
  }
  .infoTop {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    border-bottom:.01rem solid #F4F4F4;
    padding-bottom: .1rem;
  }
  .infoTop > img {
    width: .73rem;
    height: .6rem;
  }
  .infoMsg {
    width: calc(100% - .83rem);
    margin-left: .1rem;
    height: .6rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .infoMsg > p:nth-child(1) {
    width: 100%;
    font-size: .15rem;
    line-height: .15rem;
    font-family: Adobe Heiti Std;
    font-weight: 500;
    color: #282828;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .msg_2 {
    color: #717171;
    font-size:.14rem;
    line-height: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .msg_2>p {
    margin-right: .1rem;
  }
  .num {
    display: flex;
    flex-flow: row;
    align-items: center;
    height: .14rem;
  }
  .num>p:nth-child(1) {
    line-height: .14rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #171717;
    margin-right: .3rem;
  }
  .num>p:nth-child(2) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #424242;
  }
  .infoBot {
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    font-size: .15rem;
    color: #171717;
    font-family:PingFang SC;
    font-weight: bold;
    box-sizing: border-box;
    padding: 0 .05rem;
  }
  .bot-shopMsg {
    padding-top: .1rem;
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .bot-shopMsg>textarea {
    width: 2rem;
    height: .5rem;
    resize: none;
    border: none;
    font-size:.14rem;
  }
  .bot-shopMsg>textarea::placeholder {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #717171;
    text-align: right;
  }

  .bottom {
    width:3.51rem;
    background:rgba(255,255,255,1);
    box-shadow:0 .6rem .11rem 0 rgba(225,225,225,0.28);
    border-radius:.07rem .07rem .07rem .07rem;
    box-sizing: border-box;
    margin: .1rem auto;
    padding: 0 .1rem;
  }
  .item,.bot_box,.item-1{
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: .01rem solid #F4F4F4;
  }
  .item>div>img {
    width: .17rem;
    height: .17rem;
    margin-right: .1rem;
  }
  .item-1>div:nth-child(1)>img {
    width: .6rem;
    height: .16rem;
  }
  .item-1>div>img {
    margin-left: .1rem;
  }
  .item-1>div:nth-child(1) {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .item>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .item>div>span,.bot_box>span,.bot_box>div>span,.item-1>div {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #2D2C2C;
  }
  .bot_box>div>span,.item-1>div:nth-child(2) {
    color: #717171;
  }
  .item>span {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF7611;
  }
  .bot_box>div>img,.item-1>div:nth-child(2)>img {
    width: .05rem;
    height: .1rem;
    margin-left: .2rem;
  }



  .money {
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-end;
  }
  .money>p:nth-child(1) {
    color: #2D2C2C;
    font-size: .12rem;
    margin-right: .1rem;
  }
  .money>p:nth-child(2) {
    color: #2D2C2C;
    font-size: .12rem;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .money>p:nth-child(1)>span {
    color: #E60012;
    font-size: .12rem;
  }
  .money>p:nth-child(2)>span {
    color: #151515;
    font-size: .15rem;
    font-weight: bold;
  }

  footer {
    width:3.4rem;
    height:.5rem;
    background:linear-gradient(0deg,rgba(255,191,37,1) 0%,rgba(255,191,37,1) 100%);
    box-shadow:0 .06rem .11rem 0 rgba(255,118,17,0.4);
    margin: .45rem auto 0;
    border-radius: .3rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
  }

  .foot_left {
    width: 2.49rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 .15rem;
  }
  .foot_left>span {
    font-size:.1rem;
    color: #ffffff;
    font-family:PingFang SC;
    font-weight:500;
  }
  .foot_left>p {
    font-size: .14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #ffffff;
  }
  .foot_left>p>span {
    font-size: .18rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #ffffff;
  }
  .submit {
    width: .91rem;
    height: 100%;
    color: #ffffff;
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:bold;
    line-height: .5rem;
    background:linear-gradient(90deg,rgba(255,118,17,1) 1%,rgba(255,118,17,1) 100%);
    text-align: center;
  }

  .selectedAddress {
    width:3.52rem;
    height:1.46rem;
    background:rgba(255,255,255,1);
    border-radius:.07rem .07rem .07rem .07rem;
    margin: .1rem auto;
    box-sizing: border-box;
    padding: 0 .1rem;
  }
  .select_top {
    border-bottom: .01rem solid rgba(244,244,244,1);
    width: 100%;
    height: .9rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }
  .select_top>img:nth-child(2) {
    width: .08rem;
    height: .15rem;
    margin-right: .1rem;
  }
  .sel_top {
    width: 90%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .sel_top>div {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .1rem;
  }
  .sel_top>div>img {
    width: .31rem;
    height: .2rem;
    margin-right: .1rem;
  }
  .sel_top>div>p {
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #1D1D1D;
  }
  .sel_top>p:nth-child(2) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #3D3D3D;
  }
  .select_bot {
    width: 100%;
    height: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .select_bot {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
  }
  .select_bot>span:nth-child(1) {
    color: #171717;
  }
  .select_bot>span:nth-child(2) {
    color: #FF7611;
  }

  .popup {
    width: 100%;
    height: 100%;
  }
  .popup>img:nth-child(2) {
    width: .3rem;
    height: .3rem;
    position: absolute;
    right: .3rem;
    top: 20%;
    z-index: 9999;
  }

  .popup_box {
    width:2.6rem;
    min-height:2.55rem;
    background:rgba(255,255,255,1);
    border-radius:.07rem;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    padding: .25rem 0 .35rem;
  }
  .popup_box>img {
    width: .93rem;
    height: .86rem;
  }
  .pop1 {
    font-size:.2rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #FF7611;
  }
  .pop2 {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
    margin: .05rem 0;
  }
  .pop3 {
    width:1.73rem;
    height:.38rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.19rem;
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #ffffff;
    line-height: .38rem;
    text-align: center;
    letter-spacing: .02rem;
  }
  .bodyHide {
    overflow: hidden;
  }

  /* 弹窗适配 */
  >>> .fkPopup {
    padding: .02rem;
    background-color: transparent;
  }

  .item-1-img>p {
    background-image: url("../../../static/img/youhuijuanbeijingtu.png");
    font-size: .12rem;
    text-align: center;
    line-height: .2rem;
    color: #FFFFFF;
    padding: 0 .1rem;
    background-size: 100%;
  }

  /* 弹出框 */
  >>> .van-action-sheet__description {
    padding: .16rem;
    color: #333333;
    font-size: .18rem;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: .2rem;
  }

  >>> .van-action-sheet__cancel, .van-action-sheet__item {
    font-size: .18rem;
    line-height: .5rem;
    color: #333333;
    text-align: left;
    box-sizing: border-box;
    padding-left: .2rem;
  }

  >>> .van-popup {
    min-height: 2rem;
  }

  >>> .van-popup--bottom.van-popup--round {
    border-radius: .2rem .2rem 0 0;
  }

  >>> .van-action-sheet__item {
    height: .5rem;
  }
  >>> .fkPopup{
    transform: translate3d(0,0,0);
    top: 15% !important;
    left: calc(50% - 1.65rem) !important;
  }

  .yhj_wrap {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: .3rem .15rem;
    background-color: #F5F5F5;
  }

  .yhj_tit {
    display: flex;
    flex-flow: row;
    align-items: center;
    position: relative;
    margin-bottom: .15rem;
  }

  .yhj_tit > p {
    width: 100%;
    font-size: .18rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    text-align: center;
  }

  .yhj_tit > img {
    width: .26rem;
    height: .26rem;
    position: absolute;
    right: 0;
  }

  .yhj_item_wrap {
    width: 100%;
    height: 2.5rem;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .yhj_item {
    width: 100%;
    height: 1.05rem;
    background-image: url("../../../static/img/youhuiquanbj1111.png");
    background-size: 100% 100%;
    margin-bottom: .1rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }

  .yhj_item_left {
    width: 28%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .yhj_item_left > p:nth-child(1) {
    font-size: .36rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #FF002A;
  }

  .yhj_item_left > p:nth-child(1) > span {
    font-size: .24rem;
  }

  .yhj_item_left > p:nth-child(2) {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }

  .yhj_item_right {
    width: 71%;
    height: 100%;
    box-sizing: border-box;
    padding-left: .1rem;
    padding-right: .15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }


  .yhj_item_rt_left {
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  .yhj_item_rt_left > p:nth-child(1) {
    font-size: .18rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #323134;
  }

  .yhj_item_rt_left > p:nth-child(2) {
    font-size: .12rem;
    color: #FF6F02;
    border: .01rem solid #FF6F02;
    line-height: .15rem;
    padding: 0 .05rem;
    border-radius: .05rem;
    text-align: center;
    margin: .05rem 0;
    width: .5rem;
  }

  .yhj_item_rt_left > p:nth-child(3) {
    font-size: .12rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #CCCCCC;
  }

  .yhj_item_btn {
    width: .7rem;
    height: .27rem;
    background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
    box-shadow: 0 .06rem .11rem 0 rgba(255, 118, 17, 0.4);
    border-radius: .13rem;
    text-align: center;
    line-height: .27rem;
    font-size: .1rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
  }

  .usered {
    background: none !important;
    box-shadow: none !important;
    border: .01rem solid rgba(255, 112, 4, 1);
    color: #FF6F02;
  }

  .payTxt {
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    font-size:.14rem;
    font-family:PingFang SC;
    color: #1D1D1D;
  }

  /* 弹窗适配 */
  >>> .fkPopup {
    padding: .02rem;
    background-color: transparent;
  }
  /* 加减数量适配 */
  >>> .van-stepper__minus,>>> .van-stepper__plus {
    width: .22rem !important;
    height: .22rem !important;
    border-radius: .04rem 0 0 .04rem;
    padding: .04rem;
  }
  >>> .van-stepper__minus::before,>>> .van-stepper__plus::before {
    width: .13rem;
    height: .01rem;
  }
  >>> .van-stepper__minus::after {
    width: .13rem;
    height: .01rem;
  }
  >>> .van-stepper__plus::after {
    width: .01rem;
    height: .13rem;
  }
  >>> .van-stepper__input {
    border-width: .01rem 0;
    margin: 0 .02rem;
    font-size: .14rem;
    width: .32rem;
    height: .22rem !important;
  }
</style>
